<style scoped>
    @import "../styles/group.css";


</style>
<template>
    <div class="page-grouphome page-wrap" id="page-grouphome">
        <header-component ></header-component>
        <div class="swiper-container group_swiper">
            <ul class="swiper-wrapper">

                <li class="swiper-slide" v-for="(k,i) in data.main_image" track-by="$index">
                    <a href="javascript:;"><img :src="i"  /></a>
                </li>

            </ul>
            <div class="group_timelimit">
                <i class="ifont">&#xe640;</i><span class="d">{{day}}</span>天<span class="h">{{hour}}</span>小时<span class="m">{{minute}}</span>分<span class="s">{{second}}</span>秒
            </div>
        </div>

        <div class="group_good_main" >
            <div class="group_good_price">
                <span class="actually_price"><em>￥</em><i>{{data.price}}</i></span><del class="del_price">￥<em>{{data.origin_price}}</em></del><span class="less_price">拼团可省<em>{{data.discount_price}}</em>元</span>
            </div>
            <div class="group_good_title">{{data.main_title}}</div>
            <p class="group_good_intro">{{data.sub_title}}</p>
            <div class="group_good_gift"><i class="ifont">&#xe649;</i><span>抽奖规则</span></div>
            <p class="group_good_intro rule_desc" :data-content="data.rule_desc"></p>
            <div class="group_count">
                <div class="rect">

                    <span>{{data.join_num}}<br/>人团</span>
                </div>
            </div>
        </div>
        <div class="group_good_trans">
            <div class="group_good_label">
                <span><i class="ifont">&#xe648;</i>包邮</span>
                <span><i class="ifont">&#xe648;</i>7天退换</span>
                <span><i class="ifont">&#xe648;</i>假一赔十</span>
            </div>
            <div class="group_good_label">开团支付成功，邀请{{(data.join_num | toInt) - 1}}人成功参团，人数不足自动退款</div>
        </div>
        <div class="group_good_main">
            <div class="group_good_gift"><i class="ifont">&#xe649;</i><span>拼团玩法</span><a href="javascript:;" @click="isShowRule=true" >规则说明>></a></div>
            <div class="group_good_intro"><span>1.支付开团/参团</span>&nbsp;&nbsp;&nbsp;<span>2.邀请好友参团</span>&nbsp;&nbsp;&nbsp;<span>3.人满成团</span></div>
        </div>
        <div class="group_productInfo">产品信息</div>
        <div class="productImg">

            <img :src="i" v-for="(k,i) in data.detail_image" track-by="$index"/>

        </div>
        <div class="group_good_pay">
            <a class="group_backhome" href="javascript:;" v-link="{path:'/home'}"><i class="ifont">&#xe651;</i> <span>首页</span></a>
            <a v-if="g_id" class="group_addGroupBtn largeRed" href="javascript:;"  v-link="{path:'/groupPay',query:{id:data.productid,buyType:1,g_id:g_id}}"  data-price="{{data.price}}">立即参团（￥{{data.price}}）</a>
            <template v-else>
            <a class="group_payBtn pink" href="javascript:;" @click="buyTip"  :data-price="data.sale_price"><span>￥{{data.sale_price}}</span><span>单独购买</span></a>
            <a class="group_payBtn largeRed" href="javascript:;"  v-link="{path:'/groupPay',query:{id:data.productid,buyType:1}}"  :data-price="data.price"><span>￥{{data.price}}</span><span>{{data.join_num}}人团</span></a>
            </template>
        </div>

        <img src="../images/group_progress.jpg"  class="group_progress_img" @click="isShowRule=false"  v-show="isShowRule"/>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg">
        <a href="javascript:;"  @click="back">确定</a>
    </pop>
</template>
<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import User from '../module/user'
    import Goods from '../module/goods'
    import Request from '../config/request'
//    import Config from '../config/config'
    import {toInt} from '../filters/filter'
    import Swiper from '../libs/swiper.min'
    export default {
        filters: {
            toInt
        },
        directives: {

        },
        data () {
            return {
                msg:'hello',
                data:{},
                id:'',
                g_id:'',
                sw:null,
                timer:null,
                statusPop:false,
                statusToast:false,
                isShowRule:false,
                day:0,
                hour:0,
                minute:0,
                second:0
            }
        },
        created(){
            this.$dispatch('isLoading',true)
        },

        async ready () {

            if(!this.$route.query.id){
                this.$router.replace({path:'/home'});
                return;
            }
            this.id=this.$route.query.id;
            this.g_id=this.$route.query.g_id;
            let res = await Goods.getGroupProduct(this.id);

            switch(res.status){
                case 200:
                    this.data=Object.assign({},this.data, res.data)

                    break;
                case 1003:
                case 1004:

                    this.data=Object.assign({},this.data, res.data)
                    this.statusToast=true;
                    this.msg=res.msg;
                    break;
                default:
                    this.statusPop=true;
                    this.msg='页面加载失败';
                    break;
            }

            this.sw=new Swiper('.group_swiper',{

                autoplay:2000,

                // 如果需要分页器

                pagination: '.swiper-pagination',

            })

            this.timer = setInterval(()=>{

                    this.day=Math.floor(res.data.surplus_time/60/60/24);
                    this.hour=Math.floor(res.data.surplus_time/60/60%24);
                    this.minute=Math.floor(res.data.surplus_time/60%60);
                    this.second=Math.floor(res.data.surplus_time%60);

                    if(res.data.surplus_time<=0){

                         clearInterval(this.timer);

                     }

                    res.data.surplus_time--;

                    },1000)

            this.$dispatch('isLoading',false)

        },
        components:{

            pop,
            headerComponent

        },
        beforeDestroy () {

            this.sw.destroy(true,true);

            clearInterval(this.timer);

        },
        methods: {
            back(){

                this.statusPop=false;

                this.$router.replace({path:'/home'});

            },

            buyTip(){

                this.statusToast = true;

                this.msg = '暂不支持单独购买';

            }
        }
    }
</script>
